<template>
	<view>
		<view class="user_top">
			<u-image :src="avater" shape="circle" width="170rpx" height="170rpx"></u-image>
			<view class="user_right">
				<view v-if="token? false:true" class="textLogin" @click="getLogin">
					点击登录
				</view>
				<view v-else class="textLogin">
					{{nickname}}
				</view>
				<view class="text">
					有一种幸福叫有房
				</view>
			</view>
		</view>

		<!-- 我的置业 -->
		<view class="MyBottom">
			<view class="MyRealBox">
				<text class="MyText">我的置业</text>
				<u-grid :border="false" @click="onClick" col="4">
					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
						<u-icon :customStyle="{paddingTop:40+'rpx'}" :name="baseListItem.icon" :size="60"></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
				<!-- <u-toast ref="uToast" /> -->
			</view>
			<button v-show="token?true:false" class="btn" @click="logOut">退出登录</button>
		</view>

	</view>
</template>

<script>
	const avater =
		"https://img2.baidu.com/it/u=4248533344,2295565255&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=710"
	export default {
		data() {
			return {
				// 图片地址
				avater: avater,
				baseList: [{
						icon: 'order',
						title: '置业计划书'
					},
					{
						icon: 'file-text',
						title: '我的订单'
					},
					{
						icon: 'gift',
						title: '我的活动'
					},
					{
						icon: 'clock',
						title: '我的预约'
					},
					{
						icon: 'bookmark',
						title: '我的收藏'
					}
				],
				token: '',
				nickname: ''
			};
		},
		// 生命周期
		onShow() {
			// 得到token，得到了token代表已经登录，可以拿缓存里面的用户信息渲染页面
			let token = uni.getStorageSync('token')
			let userInfo = uni.getStorageSync('userInfo')
			// console.log(token, userInfo);
			if (token && userInfo) {
				let {
					avatar,
					nickname
				} = userInfo
				// console.log(userInfo);
				this.nickname = nickname
				this.avater = avatar
				this.token = token
				// console.log(123);
				if (this.baseList.length < 6) {
					this.baseList.unshift({
						icon: 'account',
						title: '我的顾问'
					})
					this.baseList.push({
						icon: 'more-circle',
						title: '我的消息'
					})
				}

			}
		},
		methods: {
			// 点击
			onClick(name) {
				// this.$refs.uToast.success(`点击了第${name}个`)
				console.log(name);
				if (!this.token) {
					// console.log('没token');
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				// console.log('有token');
				switch (name) {
					case 0:
						// console.log('第一个');
						uni.navigateTo({
							url: '/pages/user/MyConsultant/MyConsultant'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/user/BusinessPlan/BusinessPlan'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/user/MyOrder/MyOrder'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/user/MyActivities/MyActivities'
						})
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/user/MyReservation/MyReservation'
						})
						break;
					case 5:
						uni.navigateTo({
							url: '/pages/user/MyCollection/MyCollection'
						})
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/user/MyMessage/MyMessage'
						})
						break;
					default:
						uni.navigateTo({
							url: '/pages/user/MyConsultant/MyConsultant'
						})
						break;
				}
			},
			// 点击登录
			getLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 退出登录
			logOut() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.showToast({
					title: '退出成功',
					duration: 2000,
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1200)

			}
		}
	}
</script>

<style lang="scss">
	.user_top {
		background: #ccc;

		color: #fff;
		padding: 140rpx 60rpx;
		display: flex;
		align-items: center;

		.user_right {
			margin-left: 40rpx;

			.textLogin {
				font-size: 48rpx;
				margin-bottom: 24rpx;
			}
		}
	}

	.MyRealBox {
		padding: 40rpx 30rpx;
		width: 80%;
		margin: auto;
		text-align: center;
		position: relative;
		top: -90rpx;
		background-color: #fff;
		border-radius: 28rpx;
		box-shadow: 0 0 10px #ccc;

		.MyText {
			display: flex;
			// margin-left: 40rpx;
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
	}

	.btn {
		position: relative;
		top: -60rpx;
		width: 90%;
		border-radius: 30rpx;
		color: #666;
		font-size: 30rpx;
		line-height: 100rpx;
		border: none;
		box-shadow: 0 0 10px #ccc;
	}

	.grid-text {
		font-size: 14px;
		color: #666;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>
